<template>
	<div class="userhead">
		<div class="userhead_top">
			<div class="avatar">
				<img src="../../../assets/images/play.png" />
			</div>
			<div class="_name">
				<div class="_name_left">
					<p>听风语</p>
					<div class="lv">
						Lv.9
					</div>
				</div>
				<div class="checkIn">
					<span>签到</span>
				</div>
			</div>
		</div>
		<div class="userhead_bottom">
			<div class="userhead_bottom_box">
				<div class="userhead_bottom_box_flex">
					<div class="userhead_bottom_box_flex_left">
						<h3>开通黑胶VIP</h3>
						<h4>新客仅需5元</h4>
					</div>
					<div class="userhead_bottom_box_flex_right">
						<p>猜灯谜赢大奖</p>
						<img src="../../../assets/images/灯笼.png" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.userhead {
		.userhead_top {
			/*box-sizing: border-box;*/
			padding: vw(60) vw(20) vw(50) vw(20);
			background: #e3e2e0;
			.avatar {
				width: vw(70);
				height: vw(70);
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				font-size: 0;
				img {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: vw(70);
					height: vw(70);
				}
			}
			._name {
				margin-top: vw(15);
				display: flex;
				justify-content: space-between;
				align-items: center;
				._name_left {
					display: flex;
					align-items: center;
					p {
						overflow: hidden;
						color: #42413f;
						max-width: vw(150);
						height: vw(18);
						line-height: vw(18);
						font-size: vw(18);
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.lv {
						margin-left: vw(7);
						width: vw(32);
						height: vw(17);
						text-align: center;
						background: #d7d3d2;
						border-radius: vw(10);
						line-height: vw(17);
						color: #969291;
						font-size: vw(10);
					}
				}
				.checkIn {
					border-radius: vw(14);
					width: vw(67);
					height: vw(27);
					background: #ff3739;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 0;
					span {
						color: #eaced7;
						font-size: vw(12);
					}
				}
			}
		}
		.userhead_bottom {
			width: 100%;
			position: relative;
			.userhead_bottom_box {
				border-radius: vw(6);
				width: 90%;
				padding: vw(15) vw(10);
				background: -webkit-linear-gradient(left, #121212, #363636);
				background: -o-linear-gradient(right, #121212, #363636);
				background: -moz-linear-gradient(right, #121212, #363636);
				background: linear-gradient(to right, #121212, #363636);
				position: absolute;
				left: 50%;
				top: vw(-30);
				transform: translateX(-50%);
				.userhead_bottom_box_flex {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.userhead_bottom_box_flex_left {
						padding-right: vw(20);
						border-right: 1px solid #2e2e2e;
						h3 {
							font-size: vw(14);
							color: #d8c7c3;
							margin-bottom: vw(2);
						}
						h4 {
							margin-top: vw(2);
							font-size: vw(10);
							color: #707070;
						}
					}
					.userhead_bottom_box_flex_right {
						height: 100%;
						font-size: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						p {
							color: #b1b1b1;
							font-size: vw(12);
							margin-right: vw(13);
						}
						img {
							width: vw(27);
							height: vw(27);
						}
					}
				}
			}
		}
	}
</style>